﻿@import "_theme";

#loginBk{
    position:fixed;
    width:100%;
    height:100%;
    background-image: url('/UI/imgs/loginBk.jpg');
    background-size:cover;
}

#site-navi {
    background-color: transparent;
    position: fixed;
    z-index: 10;
    top: 0;

    &.fix {
        background-color: rgba(0, 0, 0, 0.40);

        & a {
            color: $ClrThemeHotTxt;
        }

        & > #site-navi-enter {
            transition: opacity linear 1s;
            opacity: 100;
        }
    }
}

#slogan{
    color:white;
    text-shadow:3px 3px 5px black;
}

#loginform-container {
    position: absolute;
    left: 70%;
}

section{
    width:100%;
    background-attachment:fixed;
    background-size:cover;
}

#section1{
    height:100%;
    padding-top:15rem;
}

@-moz-keyframes downArrow {
  0% {
    background-position-y: 70%;
    opacity: 0.5; }
  70% {
    background-position-y: bottom;
    opacity: 1; }
  100% {
    background-position-y: 70%;
    opacity: 0.5; } }

@-webkit-keyframes downArrow {
  0% {
    background-position-y: 70%;
    opacity: 0.5; }
  70% {
    background-position-y: bottom;
    opacity: 1; }
  100% {
    background-position-y: 70%;
    opacity: 0.5; } }

@keyframes downArrow {
  0% {
    background-position-y: 70%;
    opacity: 0.5; }
  70% {
    background-position-y: bottom;
    opacity: 1; }
  100% {
    background-position-y: 70%;
    opacity: 0.5; } }
#navi-next{
    color:white;
    position:absolute;
    bottom:1rem;
    width:100%;
    background-image: url(/UI/imgs/more-down.gif);
    background-repeat: no-repeat;
    background-position: center 3rem;
    height: 5.5rem;
    background-size: auto 1.5rem;
    animation:downArrow linear 1s infinite;
    &>h6{
        text-align:center;
    }
}

#section2{
    height:100%;
    background-color:white;
}

#section3{
    height:100%;
    background-image: url('/UI/imgs/section-3-bk.jpg');
}

#section4 {
    height: 100%;
    background-color: white;
}

#section5 {
    height: 100%;
    background-image: url('/UI/imgs/section-5-bk.png');
}

#user-logined-panel {
    text-align:center;
    margin-top:10rem;
}

#ulp-himg {
    width: 12rem;
    height: 12rem;
    border-radius: 6rem;
    border: 5px solid white;
    display: block;
    margin: 0 auto 10px auto;
    background-size: cover;

    &:after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 1px solid white;
        box-shadow: 0 0 5px 0 white;
        animation: boom 3s ease-out infinite;
    }
}
#ulp-enter {
    margin-top: 10px;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.6rem;
    font-weight: bold;
    border-radius: 1.5rem;
    padding: 0 2rem;

    & > i {
        font-size: 1.6rem;
        &:before{
            color:$ClrFocusTxt;
        }
    }

    &:hover{
        &>i{
            &:before{
                color:$ClrFocusTxt;
            }
            color:$ClrFocusTxt !important;
        }
    }
}
